<!-- 班级学员 -->
<template>
    <div class="app-container">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="学员名">
                <el-input v-model="searchName" placeholder="学员名"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="pageClassUser()">查询</el-button>
                <el-button type="success" @click="openDialog()">添加</el-button>
                <el-button
                    type="danger"
                    :disabled="deleteBatchButton"
                    @click="deleteByIds(multipleSelection)"
                >批量删除</el-button>
            </el-form-item>
        </el-form>

        <!--**************************表格数据*****************************-->
        <el-table
            :data="users"
            style="width: 100%"
            stripe
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="头像">
                <template slot-scope="scope">
                    <!-- <el-avatar shape="square" :size="medium" :src="scope.row.avatar"></el-avatar> -->
                    <el-avatar :size="45" fit="fill" :src="scope.row.avatar"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column label="昵称" width="150" fixed>
                <template slot-scope="scope">
                    <el-tag>{{ scope.row.nickname }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="手机号" width="150" fixed>
                <template slot-scope="scope">
                    <el-tag>{{ scope.row.mobile }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="性别">
                <template slot-scope="scope">
                    <el-tag type="info">{{ scope.row.sex == 1 ? "女" : "男" }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="sign" label="个性签名"></el-table-column>

            <el-table-column label="操作" width="230">
                <template slot-scope="scope">
                    <el-button type="danger" size="small" @click="deleteByIds([scope.row.id])">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--**************************添加学员对话框*****************************-->
        <el-dialog
            title="添加学员"
            :visible.sync="dialog.dialogTableVisible"
            width="80%"
            @close="dialog.dialogFormVisible = false,dialog.multipleSelection = []"
        >
            用户名
            <el-input
                v-model="dialog.pageUser.nickname"
                placeholder="用户名"
                autofocus="true"
                maxlength="10"
                style="width:15%"
            ></el-input>性别
            <el-select v-model="dialog.pageUser.sex" clearable placeholder="请选择" style="width:8%">
                <el-option :key="1" label="女" :value="1"></el-option>
                <el-option :key="2" label="男" :value="2"></el-option>
            </el-select>年龄
            <el-input-number
                v-model="dialog.pageUser.lowAge"
                :min="0"
                controls-position="right"
                style="width:10%"
            ></el-input-number>&nbsp;-
            <el-input-number
                v-model="dialog.pageUser.highAge"
                :min="0"
                controls-position="right"
                style="width:10%"
            ></el-input-number>注册日期
            <el-date-picker
                v-model="dialog.pageUser.time"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>

            <el-button type="primary" @click="getDialogUsers()">查询</el-button>
            <el-divider></el-divider>
            <el-table
                :data="dialog.users"
                style="width: 100%"
                stripe
                @selection-change="handleSelectionChange2"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="头像">
                    <template slot-scope="scope">
                        <!-- <el-avatar shape="square" :size="medium" :src="scope.row.avatar"></el-avatar> -->
                        <el-avatar :size="45" fit="fill" :src="scope.row.avatar"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column label="昵称" width="150" fixed>
                    <template slot-scope="scope">
                        <el-tag>{{ scope.row.nickname }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" width="150" fixed>
                    <template slot-scope="scope">
                        <el-tag>{{ scope.row.mobile }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="性别">
                    <template slot-scope="scope">
                        <el-tag type="info">{{ scope.row.sex == 1 ? "女" : "男" }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>
                <el-table-column prop="sign" label="个性签名"></el-table-column>
            </el-table>

            <!--****************************分页器**********************************-->
            <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                background
                :current-page="dialog.current"
                :page-sizes="[6, 15, 20, 30, 40, 50]"
                :page-size="dialog.limit"
                :hide-on-single-page="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dialog.total"
            ></el-pagination>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addClassUser()">确 定</el-button>
            </div>
        </el-dialog>

        <!--**************************分页*****************************-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page="current"
            :page-sizes="[6, 15, 20, 30, 40, 50]"
            :page-size="limit"
            :hide-on-single-page="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
        <!--            :hide-on-single-page="true"-->
        <el-backtop :visibility-height="100"></el-backtop>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import classApi from "@/api/course/classroom";
import { pageUser } from "@/api/ucenter/user";
export default {
    //import引入的组件需要注入到对象中才能使用
    props: ["classId"],
    data() {
        //这里存放数据
        return {
            current: 1,
            limit: 6,
            total: 0,
            users: [],
            searchName: "",
            multipleSelection: [],
            deleteBatchButton: true,

            dialog: {
                dialogTableVisible: false,
                current: 1,
                limit: 6,
                total: 0,
                pageUser: {
                    nickname: "",
                    sex: "",
                    lowAge: 0,
                    highAge: 100,
                    beginTime: "",
                    endTime: "",
                    time: [],
                },
                users: [],
                multipleSelection: [],
            },
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        pageClassUser() {
            classApi
                .pageClassUser(
                    this.classId,
                    this.current,
                    this.limit,
                    this.searchName
                )
                .then((response) => {
                    this.users = response.data.users;
                    this.total = response.data.rows;
                });
        },
        handleSizeChange(val) {
            this.current = parseInt((this.current * this.limit) / val);
            this.limit = val;
            this.pageClassUser();
        },
        handleCurrentChange(val) {
            this.current = val;
            this.pageClassUser();
        },
        handleSelectionChange(val) {
            this.deleteBatchButton = val.length === 0 ? true : false;
            this.multipleSelection = [];
            for (var i = 0; i < val.length; i++) {
                this.multipleSelection.push(val[i].id);
            }
        },
        deleteByIds(userIds) {
            this.$confirm("确定要删除吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let objs = [];
                    for (let i = 0; i < userIds.length; i++) {
                        objs.push({
                            classId: this.classId,
                            userId: userIds[i],
                        });
                    }
                    classApi.deleteClassUser(objs).then((response) => {
                        this.pageClassUser();
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    });
                })
                .catch(() => {});
        },
        /************************对话框部分************************* */
        openDialog() {
            this.dialog.dialogTableVisible = true;
            this.getDialogUsers();
        },
        getDialogUsers() {
            if (this.dialog.pageUser.time) {
                this.dialog.pageUser.beginTime = this.dialog.pageUser.time[0];
                this.dialog.pageUser.endTime = this.dialog.pageUser.time[1];
            } else {
                this.dialog.pageUser.beginTime = "";
                this.dialog.pageUser.endTime = "";
            }
            pageUser(
                this.dialog.pageUser,
                this.dialog.current,
                this.dialog.limit
            ).then((response) => {
                this.dialog.users = response.data.users;
                this.dialog.total = response.data.rows;
            });
        },
        handleSizeChange2(val) {
            this.dialog.current = parseInt(
                (this.dialog.current * this.dialog.limit) / val
            );
            this.dialog.limit = val;
            this.getDialogUsers();
        },
        handleCurrentChange2(val) {
            this.dialog.current = val;
            this.getDialogUsers();
        },
        handleSelectionChange2(val) {
            this.dialog.multipleSelection = [];
            for (var i = 0; i < val.length; i++) {
                this.dialog.multipleSelection.push(val[i].id);
            }
        },
        addClassUser() {
            let objs = [];
            for (let i = 0; i < this.dialog.multipleSelection.length; i++) {
                objs.push({
                    classId: this.classId,
                    userId: this.dialog.multipleSelection[i],
                });
            }
            if (objs.length > 0) {
                classApi.addClassUser(objs).then((response) => {
                    this.pageClassUser();
                    this.dialog.dialogTableVisible = false;
                    this.dialog.multipleSelection = [];
                });
            }
        },
        init() {
            this.pageClassUser();
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.init();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发，页面一旦激活就会触发
};
</script>
<style scoped>
</style>